<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Medias : Ionize User Guide</title>

<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />

<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>

<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='Ionize Dev Team' />
<meta name='description' content='Ionize User Guide' />

</head>
<body>

<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<div id="nav2" onclick="myHeight.toggle();"><a name="top"></a><a href="javascript:void(0);"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>Ionize User Guide Version 0.9.7</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->


<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://www.ionizecms.com/">Ionize Home</a> &nbsp;&#8250;&nbsp;
<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
Medias : Files, pictures, videos
</td>
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="ionizecms.com/user-guide" />Search User Guide&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
</tr>
</table>
<!-- END BREADCRUMB -->

<br clear="all" />


<!-- START CONTENT -->
<div id="content">

<h1>Media</h1>

<p>Pictures, music, videos, files can be uploaded through the Ionize media manager or directly by FTP in your media folder.</p>

<p>Media can be used in 2 ways :</p>

<ul>
	<li>Linked to articles or pages and displayed through ionize's tags,</li>
	<li>Added in articles content with the embeded editor.</li>
</ul>

<p>Media are stored by default in the <dfn>/files</dfn> folder of your installation directory.</p>

<p>To change the default media folder, go in the panel : <var>Settings > Advanced Settings > Media Management</var>.</p>

<p class="important">Changing the folder name changes renames also the filesystem folder and updates media URLs found in the database content.</p>


<h2>Content linked media</h2>

<p>Media can be linked to Pages and Articles.</p>

<p>Linked media instead of adding them to the content has several advantages : </p>

<ul>
	<li>The media meta data (alternative text, title, etc.) are stored in database, for each media,</li>
	<li>Because the media list can be looped in a view, it is easy to build a gallery from media linked to an article,</li>
	<li>Automatic thumbnails generation can be set for linked media. Using these thumbnails can preserve the design.</li>
</ul>

<p>Ordering media is simply done by drag'n drop.</p>

<img src="../images/ionize_link_media.jpg" />



<h3>Pictures thumbnails</h3>

<p>When a picture is linked to a page or an article, the defined thumbnails are automatically created by Ionize if they don't exists.</p>
<p>These thumbnails are defined in <var>Settings > Advanced settings</var>.</p>

<img src="../images/ionize_thumb_creation.jpg" />

<p>In the above example, we define a 500px width thumb wich will be located in the folder <var>thumb_medium</var>.<br/>
In this example, when a thumb is created, it will use the sharp filter, which will give a more sharpen thumbnail and avoid the common blur problem on little thumbs.
</p>

<h3>Automatic picture resize on upload</h3>
<p>When set, uploaded pictures are checked and if their size is bigger than the defined one, they will be resized during the upload process.</p>
<p>To activate automatic upload : </p>
<ol>
	<li><var>Settings > Advanced settings</var></li>
	<li>In <var>Media Management</var></li>
	<li>Set <strong>Picture max. Width</strong> and <strong>Picture max. Height</strong> values, in pixels.</li>
</ol>



<table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
<tr>
	<th>Setting</th>
	<th>Description</th>
</tr>
<tr>
	<td class="td"><strong>Folder</strong></td>
	<td class="td">
		Thumbnail folder, in the picture folder.<br />
		The folder will physically be named <var>thumb_&lt;your_thumb_folder></var>.<br/>
		Example : The thumbs in the folder called "small" are physically stored in the folder <var>thumb_small</var>.</td>
</tr>
<tr>
	<td class="td"><strong>Size</strong></td>
	<td class="td">
		Thumbnail size, in pixels.
	</td>
</tr>
<tr>
	<td class="td"><strong>Reference</strong></td>
	<td class="td">
		Will width or height of the picture be the reference for the thumb size
	</td>
</tr>
<tr>
	<td class="td"><strong>Square</strong></td>
	<td class="td">
		The thumbnail will be cropped to a square one.
	</td>
</tr>

<tr>
	<td class="td"><strong>Unsharp filter</strong></td>
	<td class="td">
		When selected, an unsharp mask will be processed on the thumb during generation. This will improve the thumbnail sharpness, but make the thumbnail creation process longer.
		This filter is not valuable on big thumbnails (more than 200 pixels).
		On big thumbnail, it also can takes a lot of process memory.	
	</td>
</tr>
</table>

<h2>Media meta data</h2>

<p>
Once one media is attached to a page or a article, it is encouraged to add some meta data to it.</p>
<p>Once written, these meta data will be linked to the media and if you attach the same media to another article or page, you will find the same data.<br />
In other words, once set, you don't have to set again the media meta data of one medium.
</p>


<h2>Get Media in views</h2>

The <dfn>&lt;media /></dfn> tag allows to loop through a kind of media : 

<pre>
&lt;ion:medias type="picture/music/video/file" [ range="1,2" limit="3" ] >
	&lt;img title="&lt;ion:title />" alt="&lt;ion:alt />" src="&lt;ion:src />" />
&lt;/ion:medias>
</pre>

<p>Look at the Ionize <a href="../tags/medias_tags.html">media tag documentation</a> to see complete features of this tag.</p>


</div>
<!-- END CONTENT -->


<div id="footer">
<p>
Previous Topic:&nbsp;&nbsp;<a href="users.html">Users and Groups</a>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
Next Topic:&nbsp;&nbsp;<a href="static_translations.html">Static translations</a>
</p>
<p><a href="http://www.ionizecms.com/">Ionize website</a></p>
</div>

</body>
</html>